<template>
  <div>
    <el-card :body-style="{ padding: '15px' }">
      <div>
        <el-button type="primary" @click="addCamera">新增摄像头</el-button>
        <el-popconfirm
          title="您确定要删除吗"
          @confirm="deleteCamera(deleteArr)"
        >
          <template #reference>
            <el-button type="danger">批量删除</el-button>
          </template>
        </el-popconfirm>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%; max-height: 730px; margin-top: 15px"
        @selection-change="selectList"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="alias" label="设备别名" width="90" />
        <el-table-column prop="device_id" label="设备ID" width="90" />
        <el-table-column prop="build" label="楼栋名称" width="85" />
        <el-table-column prop="storey" label="所在楼层" width="85" />
        <el-table-column prop="location" label="所在位置" width="85" />
        <el-table-column prop="addx" label="onvif地址" width="90" />
        <el-table-column prop="username" label="账户" width="70" />
        <el-table-column prop="password" label="密码" width="75" />
        <el-table-column prop="rtsp_uri" label="码流地址1" width="130" />
        <el-table-column prop="rtsp_uri1" label="码流地址2" width="130" />
        <el-table-column prop="rtsp_uri2" label="码流地址3" width="130" />
        <el-table-column prop="record" label="是否录像" width="85">
          <template #default="{ row }">
            <div>{{ row.record ? "是" : "否" }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="online" label="是否在线" width="85">
          <template #default="{ row }">
            <div>{{ row.online ? "是" : "否" }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="uuid" label="uuid" width="120" />
        <el-table-column prop="key" label="key" width="70" />
        <el-table-column prop="address" label="操作" width="171">
          <template #default="{ row }">
            <div class="flex" style="justify-content: center">
              <div class="toBeTested bg-[#409eff]" @click="edit(row)">编辑</div>
              <el-popconfirm
                title="您确定要删除吗"
                @confirm="deleteCamera([row.id])"
              >
                <template #reference>
                  <div class="toBeTested bg-[#f56c6c]">删除</div>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <form-pop-ups
        v-if="editFlag"
        :formData="formData"
        @closePopUps="closePopUps"
      />
      <div class="mt-[10px] flex justify-between">
        <div />
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getCameraList, deleteCameraList } from "@/api/camera";
import formPopUps from "./components/formPopUps.vue";
import { ElMessage } from "element-plus";
import { RuleForm } from "@/type/camera";
const router = useRouter();
const currentPage = ref(1);
const pageSize = ref(10);
const tableData = ref<RuleForm[]>([]);
const editFlag = ref<boolean>(false);
const formData = ref<RuleForm>(null);
const deleteArr = ref<number[]>([]);
const total = ref<number>(0);
const addCamera = () => {
  router.push("/camera/addcamera");
};
const edit = (row: RuleForm) => {
  editFlag.value = true;
  formData.value = row;
};
onMounted(() => {
  getData();
});
const getData = async () => {
  const res = await getCameraList({
    keyword: "",
    page: currentPage.value,
    page_size: pageSize.value
  });
  tableData.value = res.result.items;
  total.value = res.result.total;
};
const closePopUps = () => {
  editFlag.value = false;
  getData();
};

const selectList = (val: RuleForm[]) => {
  deleteArr.value = val.map(item => {
    return item.id;
  });
};
const deleteCamera = async (id: number[]) => {
  const res = await deleteCameraList({ ids: id });
  if (res.code === 0) {
    ElMessage({
      message: "删除成功",
      type: "success"
    });
    getData();
  } else {
    ElMessage.error(res.message);
  }
};
const handleSizeChange = (val: number) => {
  pageSize.value = val;
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
};
</script>
<style scoped lang="scss">
::v-deep .el-table thead th {
  text-align: center;
}

::v-deep .el-table tbody td {
  text-align: center;
}

.toBeTested {
  width: 80px;
  height: 30px;
  margin: 0 auto;
  line-height: 30px;
  color: #fff;
  cursor: pointer;
  border: 1px solid #e9e9eb;
  border-radius: 5px;
}
</style>
